<script lang="ts" setup>
import { computed } from "vue"

export interface ListProps {
  border?: boolean
  size?: 'small' | 'medium' | 'large' | number
}

const props = withDefaults(defineProps<ListProps>(), {
  border: true,
  size: 'medium'
})

const classNames = computed(() => {
  const classes: string[] = []
  if (props.border) {
    classes.push('umrp-list-item-border')
  }
  if (props.size) classes.push(`umrp-list-item-${props.size}`)
  return classes
})
</script>

<template>
  <div class="umrp-list" :class="classNames">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.umrp-list {

  &-item-small {
    :deep(.umrp-list-item) {
      padding: 8px 0;
    }
  }

  &-item-medium {
    ::v-deep(.umrp-list-item) {
      padding: 12px 6px;
    }
  }

  &-item-large {
    margin-top: -24px;
    margin-bottom: -24px;

    ::v-deep(.umrp-list-item) {
      padding: 24px 0;
    }
  }

  &-item-border {
    ::v-deep(.umrp-list-item) {
      border-bottom: 1px solid #f2f2f2;
    }
  }

  ::v-deep(.umrp-list-item:last-child) {
    border-bottom: none;
  }
}
</style>
